<template>
    <div>
        <div class="user">
            <div class="user-left">
                <div class="user-left_avator">
                    <div class="avator-img">
                        <img :src="getImage('avator.png')" alt="">
                    </div>
                    <div class="avator-name">
                        <p>无敌暴龙战士</p>
                    </div>
                </div>
                <div class="user-left_func">
                    <el-row class="tac">
                        <el-col :span="24">
                            <el-menu default-active="1" class="el-menu-vertical-demo menu" text-color="#333333"
                                @select="show" background-color="#E0E0E0" active-text-color="#007BFF">
                                <el-menu-item index="1">
                                    <span>个人信息</span>
                                </el-menu-item>
                                <el-menu-item index="2">
                                    <span>账户充值</span>
                                </el-menu-item>
                                <el-menu-item index="3">
                                    <span>消费明细</span>
                                </el-menu-item>
                            </el-menu>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div class="user-right">
                <div class="user-right_content">
                    <div v-show="showIndex === '1'">
                        <p>用户名称:<span>{{ name }}</span></p>
                        <p>用户账号: <span>{{ account }}</span></p>
                        <p>用户手机:<span>{{ phone }}</span></p>
                        <p>用户等级:<span>{{ whatVIP(points) }}</span></p>
                        <p>用户余额:<span>{{ balance }}</span></p>
                        <p><el-button type="success" @click="router.push('/')">返回主页</el-button> </p>
                        <p><el-button type="danger" @click="goOut">退出登录</el-button> </p>
                    </div>
                    <div v-show="showIndex === '2'">
                        <h3>账户充值</h3>
                        <div class="money-list">
                            <div class="money" v-for="item in moneyList" :key="item" @click="userRechange(item)">
                                <h4>{{ item }}元充值额度</h4>
                                <div class="fz30 pd20" style="background-color:rgb(213, 213, 213);">￥{{ item }}</div>
                                <div>
                                    现在充值加送10元额度 <br />
                                    不限制使用时间 <br />
                                </div>
                                <el-button type="success" class="mg-t-10">立即购买</el-button>
                            </div>
                        </div>
                    </div>
                    <div v-show="showIndex === '3'" class="order">
                        <div v-for="item in orderList" :key="item" class="elegant-box">
                            <p>交易类型：{{ item.table_number ? "球桌结算" : "余额充值" }}</p>
                            <p v-show="item.table_number != null">交易桌号：{{ item.table_number }}</p>
                            <p>交易金额：{{ item.payment_price }}</p>
                            <p>交易时间: {{ item.payment_time }}</p>
                            <p>交易账号: {{ item.user_account }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { getImage } from '@/utils/index'
import { onMounted, ref, toRefs } from 'vue';
import useUserStore from '@/stores/module/user';
import { recharge } from '@/api/pay';
import { useRouter } from 'vue-router';
import { userOrder } from '@/api/order';
const router = useRouter()
const userStore = useUserStore()
const showIndex = ref("1")
const { name, points, balance, phone, account } = toRefs(userStore)
/**
 * @description: 根据不同的key展示不同的页面
 * @param {*} key
 * @return {*}
 */
const show = (key) => {
    showIndex.value = key
    console.log(showIndex.value)
}
/**
 * @description: 获取用户信息
 * @return {*}
 */
const getUserInfo = async () => {
    await userStore.userInfo()
}
onMounted(() => {
    getUserInfo()
    getUserOrder()
})
//VIP等级
const vipLevels = [
    { min: 0, max: 999, level: '基础台球会员' },  // Basic Cue Member
    { min: 1000, max: 4999, level: '黄金积分达人' }, // Gold Points Master
    { min: 5000, max: 9999, level: '白金台球精英' }, // Platinum Cue Elite
    { min: 10000, max: 19999, level: '高级积分先锋' }, // Advanced Points Pioneer
    { min: 20000, max: 29999, level: '钻石台球尊享' }, // Diamond Cue Exclusive
    { min: 30000, max: 49999, level: '至尊积分明星' }, // Supreme Points Star
    { min: 50000, max: Infinity, level: '顶级台球贵宾' } // Top Cue VIP
];

const whatVIP = (cent) => {
    const level = vipLevels.find(vip => cent >= vip.min && cent <= vip.max);
    return level ? level.level : '未知等级'; // Unknown Level
};
//可充值金额
const moneyList = ref(['18', '38', '98', '128', '248', '348', '448', '648', '999'])
//充值额度
const userRechange = async (item) => {
    const res = await recharge(
        {
            account: account.value,
            payMoney: item,
            outTradeNo: `${account.value}-${(Math.random() * 9999999).toFixed(0)}`,
        }
    )
    router.push({ name: 'paynow', state: { url: res.url } })
}

const orderList = ref('')
const getUserOrder = async () => {
    const { data } = await userOrder()
    orderList.value = data.order
    console.log(orderList.value)
}

const goOut = async () => {
    try {
        await userStore.userLogout();
        console.log('Logout successful, redirecting to home...');
        router.push('/');
        window.location.reload(); // 强制刷新页面
    } catch (error) {
        console.error('Logout failed:', error);
    }
};
</script>

<style lang="scss" scoped>
.fz30 {
    font-size: 30px;
}

.pd20 {
    padding: 20px;
}

.mg-t-10 {
    margin-top: 8px;
}

body {
    background-color: #F5F5F5;
    color: #333333;
    /* 文字颜色 */
}

.user {
    margin: 0 auto;
    display: flex;
    height: 100%;

    .user-left {
        min-width: 300px;
        text-align: center;
        height: 100%;
        background-color: #E0E0E0;

        .avator-name {
            font-size: 22px;
        }

        .user-left_func {
            .tac {

                .menu {
                    span {
                        font-size: 18px;
                    }
                }
            }

        }

    }

    .user-right {
        font-size: 24px;
        padding: 0 40px;

        .user-right_content {
            // max-width: 1180px;
            padding-top: 30px;

            p {
                padding: 20px 0;

                span {
                    margin-left: 20px;
                }
            }

            .money-list {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                font-size: 16px;

                .money {
                    margin: 10px 0;
                    // padding: 10px;
                    width: calc(1180px / 3.5);
                    background-color: rgb(240, 240, 240);

                    h4 {
                        font-weight: normal;
                        font-size: 20px;
                    }
                }
            }

            .order {
                height: 800px;
                overflow: auto;

                &::-webkit-scrollbar {
                    width: 0;
                    /* 或者一个很小的值，如 1px */
                    height: 0;
                    /* 垂直滚动条 */
                }

                .elegant-box {
                    width: 300px;
                    height: 200px;
                    background-color: #fff;
                    border: 1px solid #e0e0e0;
                    border-radius: 8px;
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
                    font-size: 16px;

                    p {
                        margin: 0;
                        padding: 0;
                    }
                }

            }
        }
    }
}

/* Media Queries for Mobile Devices */
@media screen and (max-width: 768px) {
    .user {
        flex-direction: column;
        width: 100%;

        .user-left {
            width: 100%;
            height: auto;
            padding: 10px;

            .avator-name {
                font-size: 18px;
            }

            .user-left_func {
                .tac {
                    .menu {
                        span {
                            font-size: 16px;
                        }
                    }
                }
            }
        }

        .user-right {
            width: 100%;
            padding: 10px;

            .user-right_content {
                max-width: 100%;
                padding-top: 20px;

                p {
                    padding: 10px 0;

                    span {
                        margin-left: 10px;
                    }
                }

                .money-list {
                    flex-direction: column;

                    .money {
                        width: 100%;
                        margin: 10px 0;
                        padding: 10px;

                        h4 {
                            font-size: 18px;
                        }
                    }
                }

                .order {
                    height: auto;
                    max-height: 400px;

                    .elegant-box {
                        width: 100%;
                        height: auto;
                        margin-bottom: 10px;
                    }
                }
            }
        }
    }
}
</style>
